<template>
  <div>
   <!-- 应用实例 历史版本列表-->
    <listTable
			ref="listTable"
			v-if="pageData.listOption"
			:options="pageData.listOption"
			@command="handleCommand"
			></listTable>
    
  </div>
</template>

<script>
	import listTable from "@/view/components/table/listTable";
	import { apiUrls} from '@/service/swagger/InstanceController';
//import { updateConfFile } from '@/service/swagger/DeployContentController'
import { getInstStatus } from '@/service/swagger/AcAppInstController';
import { destroy, start, stop , deleteSL , rollback } from "@/service/swagger/InstanceController";
import { appStatusFilter } from '@/filters/status/index';
import { hostipFilter } from '@/filters/type/index';
import { listenner } from "@/utils/statuslistener";
import { checkStatus } from '@/utils/common.js'
	
  export default{
    props:[
      "id"
    ],
    components: {
	    listTable,
		},
    data(){
      return{
         pageData: {
	        // 列表table 设置
	        listOption: {
	          // 列表api
	          listApi: {
	            url: apiUrls.getHistoryInstList ,
	            type: "POST",
	            params:{
	              instId : this.id,
	            }
	          },
	          // 表头设置
	          header: [{
							label: "实例名称",
							width: "200",
							propName: "instName",
							align: "left",
						}, {
							label: "主机IP",
							width: "150",
							propName: "hostsInfo",
							html: (row) => {
								return  hostipFilter(row.hostsInfo)
							},
						}, {
							label: "版本号",
							width: "",
							propName: "appVersion",
						},{
							label: "部署类型",
							width: "",
							html:(row)=>{
								if(row.deployType == 1){
									return `<span>容器</span>`
								}else{
									return `<span>裸应用</span>`
								}
							}
						}, {
							label: "应用类型",
							width: "",
							propName: "appType",
						},
						{
							label: "应用名",
							width: "",
							propName: "appName",
						},
						{
							label: "创建时间",
							width: "180",
							propName: "createTime",
						}, {
							label: "状态",
							width: "",
							propName: "status",
							html: (row) => {
								return appStatusFilter(row.status, row.expectStatus)
							},
						}, {
							label: "操作",
							width: "",
							btns: [
								{
									label: "详情",
									commandName: "goDetail" 
								},
								
							],
							btnGroups: [
								{
									label: "启动",
									commandName: "start",
									show: (row) => {
										return row.status == 2;//实际状态是已停止
									}
								},
								{
									label: "停止",
									commandName: "stop",
									show: (row) => {
										return row.status == 1;//实际状态是运行中
									}
								},
								{
									label: "销毁",
									commandName: "destory",
									show: (row) => {
										return row.status == 2;//实际状态是已停止
									}
								}, {
									label: "删除",
									commandName: "delete",
									show: (row) => {
										return row.status == 4;//实际状态是异常
									}
								},
								{
									label: "回滚",
									commandName: "rollBack",
									show: (row) => {
										return row.rollback == 1 && row.status != 4;//实际状态是运行中
									}
								},
							]
						}]
	        }
				},
      }
    },
    mounted() {
      this.init()
    },
    methods:{
      init(id){
      	if(id){
      		this.id= id;
      	}
				this.$refs.listTable.search({
					instId : this.id,
				})
			},
			handleCommand(command, row, index) {
				if (command && this[command]) {
					this[command](row, index)
				} else {
					this.$router.push({
						path: command,
						query: {
							appType: 'yingyong',
							id: row ? row.instId : '',
							deploy: row.deployType,
						}
					})
				}
			},
	    refresh() {
					this.init();
				},
				// 启动
				start(row) {
					this.$confirm("确定启动该实例？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
						.then(() => {
							start({ id: row.instId }).then(ret => {
								if (ret && ret.code == 0) {
									this.refresh()
								}
							})
						})
				},
				// 停止
				stop(row) {
					this.$confirm("确定停止该实例？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
						.then(() => {
							stop({ id: row.instId }).then(ret => {
								if (ret && ret.code == 0) {
									this.refresh()
								}
							})
						})
				},
				// 销毁
				destory(row) {
					this.$confirm("确定销毁该实例？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
						.then(() => {
							destroy({ id: row.instId }).then(ret => {
								if (ret && ret.code == 0) {
									this.refresh()
								}
							})
						})
				},
				// 删除
				delete(row) {
					this.$confirm("确定删除该实例？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
						.then(() => {
							deleteSL(row.instId).then(ret => {
								if (ret && ret.code == 0) {
									this.refresh()
									this.$message({ showClose: true, message: '删除成功！', type: 'success' })
								}
							})
						})
				},
				listLoaded(tableData) {
					let _this = this
					checkStatus(tableData, _this, appStatusFilter, getInstStatus);
				},
				goDetail(row){
					this.$router.push({
						path : "/sl/yydetail",
						query : {
							id : row.instId,
						}
					})
					setTimeout(()=>{
	            this.$emit("refresh")
	            this.init(row.instId)
	        },1000)
				},
				rollBack(row){
					this.$confirm("销毁当前运行实例并回滚至" + ( row.appVersion ) + "版本？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						rollback({
							id : row.instId
						}).then(ret => {
							if (ret && ret.code == 0) {
								this.$message({ showClose: true, message: '请求成功，开始回滚！', type: 'success' })
//								this.$router.push({
//									path : "/sl/yydetail",
//									query : {
//										id : row.instId ,
//										appType : "yingyong",
//										deploy : this.$route.query.deploy ,
//									}
//								},()=>{
									setTimeout(()=>{
			                this.$emit("rollBack")
			            },1000)
//								})
							}
						})
					})
				},
	    
    },
  }
</script>